<template>
  <div class="home_page">
    <div class="header">
      <div class="logo" @click="handleLogo">
        <img src="../../assets/logo/logo.png" alt="" />
      </div>
      <div class="option_address">
        <a-cascader :show-search="{ filter }" 
          v-model:value="listCard.address" 
          :options="proxyCityData"
          placeholder="请选择搜索地区"
           :fieldNames="{ label: 'name', value: 'code', children: 'children' }" block
          style="width: 290px" />
      </div>
    </div>
    <div class="search_box" role="search">
      <KeepAlive>
      <a-input-search size="large" v-model:value="searchValue" 
      placeholder="查找任务" @search="onSearch" @blur="handleBlur"
        @focus="handleFocus" enter-button="搜索">
        <template #addonBefore>
          <a-space>
            <a-select ref="select" v-model:value="value" style="width: 120px" size="large" @change="changeType">
              <a-select-option v-for="(item, index) of listCard.optionTypeList" :value="item.id" :key="index"
                :lable="item.name">{{ item.name }}</a-select-option>
            </a-select>
          </a-space>
        </template>
      </a-input-search>
    </KeepAlive>
      <div class="list_proposal" v-if="isShowList">
        <div class="record">
          <div class="title">历史搜索</div>
          <div class="record_list">
            <a-list item-layout="horizontal" :data-source="searchList" :locale="{
              emptyText: '暂无历史搜索',
            }">
              <template #renderItem="{ item }">
                <a-list-item class="hoverSearch" @click="optionSearch(item)">
                  <div  style="width: 100%; height: 100%;"> {{ item.title }}</div>
                  <template #actions>
                    <a-button type="link" size="small" @click="handleDelete(item)">
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
      </div>
    </div>

    <div class="resource_list" v-if="isShowSearchType">
      <div style="margin-top: 30px" v-for="item of listCard.list" :key="item.id">
        <div class="d-flex justify-content-between align-items-center" v-if="item.id != 0">
          <div class="logo_box">
            <img :src="'https://hzh.woide.top' + item.logo" :alt="item.name" class="icon_logo" />
            {{ item.name }}
          </div>
          <a-button shape="round" v-if="item.list.length != 0"
            class="d-flex justify-content-between align-items-center btn_hover" @click="checkAll(item)">
            查看全部
            <ArrowRightOutlined style="vertical-align: -50%" />
          </a-button>
        </div>

        <div class="row" v-if="item.id != 0">
          <Card class="col-sm-3" v-for="childrenItem of item.list" :key="childrenItem.id" v-show="item.list.length != 0"
            :card-info="childrenItem" mobile="0">
          </Card>

          <div v-show="item.list.length == 0" style="text-align: center; padding-bottom: 30px">
            <a-empty description="还没有发布哦~" />
            <!-- <a-button type="primary" @click="gotoMyPublish(item)">去发布</a-button> -->
          </div>
        </div>
      </div>
    </div>
    <Allresources :type="value" :pu_title="searchValue" :address="{
      pu_province_id: listCard.address[0] || null,
      pu_city_id: listCard.address[1] || null,
      pu_district_id: listCard.address[2] || null,
    }" v-else></Allresources>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, toRef } from "vue";
import { getPublishList, getBannerList } from "@/api/mutualaid/index";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import Allresources from "./AllShop/index.vue";
import Card from "@/components/Card/index.vue";
import { DeleteOutlined, ArrowRightOutlined } from "@ant-design/icons-vue";
import type { CascaderProps } from "ant-design-vue";
import type { ShowSearchType } from "ant-design-vue/es/cascader";

import cityData from "@/data/city/index";

const router = useRouter();
interface Item {
  id: number;
  name: string;
  logo: string;
  list: any[];
}
const searchValue = ref<string>("");
const isShowList = ref<boolean>(false);

interface DataItem {
  title: string;
}
let listCard = reactive({
  bannerList: [] as any[],
  optionTypeList: JSON.parse(
    window.localStorage.getItem("optionTypeList") || "[]"
  ),


  list: [] as Item[],
  address: [] as any[],
});
const value = ref<string | number>("全部");
const isShowSearchType = ref<boolean>(true);
const filter: ShowSearchType["filter"] = (inputValue, path) => {
  return path.some((option) => {
    return option.name.indexOf(inputValue) > -1;
  });
};
const optionSearch = (item: any) => {
  searchValue.value = item.title;
}
const proxyCityData: CascaderProps["options"] = cityData;
const gotoMyPublish = (item: { id: any }) => {
  router.push({ path: "/publishingresources", query: { type: item.id } });
};
const checkAll = (item: { id: any; name: any }) => {
  router.push({
    path: "/AllResources",
    query: { type: item.id, title: item.name },
  });
};

const searchList = ref(JSON.parse(localStorage.getItem("searchList") || "[]"));


onMounted(() => {
  publishListMethod();
});

const onSearch = () => {

  publishListMethod();
  var searchObj = {
    title: searchValue.value,
  };

  if (searchValue.value === "") {
    return
  }
  // if(searchList.value.length == 0){
  //   searchList.value.push(searchObj);
  //   return localStorage.setItem("searchList", JSON.stringify(searchList.value));
  // }

  searchList.value = searchList.value.filter((item: any) => item.title !== searchValue.value);

  searchList.value.unshift(searchObj);

  if (searchList.value.length > 8) {
    searchList.value.pop();
  }

  window.localStorage.setItem("searchList", JSON.stringify(searchList.value));
  isShowList.value = false;
};
const handleDelete = (IItem: any) => {
  
  searchList.value.map((item: any, index: number) => {
    if (item.title === IItem.title) {
      searchList.value.splice(index, 1);
    }
  })
  
  if(IItem.title == searchValue.value){
   
    searchValue.value = "";
  }
  window.localStorage.setItem("searchList", JSON.stringify(searchList.value));
}
const handleLogo = () => {
  router.go(-1)
}
const handleBlur = () => {
  // 
  setTimeout(() => {
    isShowList.value = false;
  }, 400);
};
const handleFocus = () => {
  // 
  isShowList.value = true;

};
const changeType = (value: any) => {
  

  // listCard.address = value;

  // publishListMethod();
};
const publishListMethod = async () => {
  isShowSearchType.value = true;
  const res = await getPublishList({
    pu_title: searchValue.value,
    pu_province_id: listCard.address[0] || null,
    pu_city_id: listCard.address[1] || null,
    pu_district_id: listCard.address[2] || null,
    pu_platform: value.value == "全部" ? 0 : value.value,
    page: 1,
    limit: 8,
  });
  if (res.data.code != 0)
    return message.error({
      content: res.data.msg,
    });

  var typeList = [
    {
      id: 0,
      name: "全部",
    },
  ];


  if (value.value == "全部" || value.value == 0) {

    listCard.list = res.data.data;
    res.data.data.map((item: any) => {
      var itemType = {
        id: item.id,
        name: item.name,
        logo: item.logo,
      };
      typeList.push(itemType);
    });
    listCard.optionTypeList = typeList;

  } else {
 
 

    isShowSearchType.value = false;
  }
  window.localStorage.setItem("typeList", JSON.stringify(typeList));
 
};
</script>

<style lang="scss" scoped>
.hoverSearch:hover {
  cursor: pointer;
}

.home_page {
  max-width: 1200px;
  margin: 0 auto;

  .header {
    width: 100%;
    // height: 45px;
    line-height: 2;
    padding: 15px 0;
    overflow: hidden;

    .logo {
      max-width: 100px;
      width: 87px;
      float: left;
      cursor: pointer;
      img {
        width: 100%;
      }
    }

    .option_address {
      float: right;
      width: 290px;
    }
  }

  .resource_list {
    margin-top: 20px;

    .logo_box {
      font-size: 20px;

      .icon_logo {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }

  .resource_list {
    margin-top: 20px;

    .logo_box {
      font-size: 20px;

      .icon_logo {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }

  .search_box {
    width: 100%;
    position: relative;
    height: 40px;

    // background-color: antiquewhite;
    .list_proposal {
      position: absolute;
      width: 100%;
      // bottom: -40px;
      padding: 10px 30px;
      top: 40px;
      box-sizing: border-box;
      z-index: 99999;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 1px 6px 6px -1px #c7c7c7;

      .record {
        .title {
          color: #c7c7c7;
          font-size: 12px;
        }

        .record_list {
          max-height: 200px;
          overflow-y: scroll;
        }
      }
    }
  }
}
</style>